<template>
  <BaseInsideDrawer :modal="false" v-model="isShow" width="20%">
      <div class="w-full h-full bg-white">
          <Component
            :is="panel"
            ref="componentRef"
          >
          </Component>
      </div>
  </BaseInsideDrawer>
</template>

<script setup lang="ts">
import { nextTick, ref, shallowRef} from "vue";
import {NodeProperty} from "/@/views/flow/design/ts/FlowEventModel";


const panel = shallowRef()
const isShow = ref(false)
const componentRef = ref()
const init = (businessObjectValue: NodeProperty,panelValue: any,callbackValue: Function) => {
  panel.value = panelValue
  isShow.value = true
  nextTick(()=>{
    componentRef.value.renderPanel(businessObjectValue,callbackValue)
  })
}
const close = () => {
  isShow.value = false
}

defineExpose({init, close})
</script>

<style scoped>

</style>